<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchDialog"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        uniqueId="mesScanRecordTable"
      >
      </ele-page>
    </div>
    <!-- <ele-form-drawer
      class="dialog-pack"
      :isLoading="isLoading"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
    >
    </ele-form-drawer> -->
  </div>
</template>

<script>
import { operateList, searchConfig, formDescDialog, rowConfig } from "./config"
import {
  getList,
  rowCreate,
  rowUpdate,
  rowDel,
  rowDetail,
  getLineCodeList,
  getProductProcessCodeList,
  getWorkCellCodeList,
  getWorkTeamCodeList,
  getUserCodeList,
  getSimulatedTypeList,
  getProdOrderTypeList,
  getCheckResultList,
  getProcessPropertyList
} from "@/api/report/mesScanRecord"
// import { formDialogConfig } from './mixin'
export default {
  name: "mesScanRecord",
  mixins: [formDescDialog, searchConfig],
  data() {
    return {
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      formDataDialog: {},
      // formDescDialog, //新增修改框
      // searchConfig,
      operateList,
      getList,
      // 列表页字段的绑定配置
      column: [
        {
          type: "selection",
          fixed: "left"
        },
        {
          type: "index",
          label: $i18n.t("common.order"),
          width: 60,
          fixed: "left"
        },
        {
          prop: "workDate",
          label: $i18n.t("mesScanRecord.workday"),
          width: 120,
          showOverflowTooltip: true,
          fixed: "left"
        },
        {
          prop: "barcode",
          label: $i18n.t("mesScanRecord.barcode"),
          minWidth: 280,
          showOverflowTooltip: true,
          fixed: "left"
        },
        {
          prop: "count",
          label: $i18n.t("mesScanRecord.totalCount"),
          minWidth: 100
        },
        {
          prop: "qualifiedQty",
          label: $i18n.t("mesScanRecord.qualifiedQty"),
          minWidth: 140
        },
        {
          prop: "unqualifiedQty",
          label: $i18n.t("mesScanRecord.unqualifiedQty"),
          minWidth: 140
        },
        // {
        //   prop: "equipmentCode",
        //   label: "设备编码",
        //   width: 120,
        // },
        // {
        //   prop: "equipmentName",
        //   label: "设备名称",
        //   width: 120,
        // },
        {
          prop: "workshopCode",
          label: $i18n.t("common.workshopCode"),
          width: 200
        },
        {
          prop: "workshopName",
          label: $i18n.t("common.workshopName"),
          width: 200
        },
        {
          prop: "lineCode",
          label: $i18n.t("common.lineCode"),
          minWidth: 200,
          showOverflowTooltip: true
          // optionProp: {
          //   value: "modelingCode",
          //   label: "modelingName",
          // },
          // option: async (data) => {
          //   const list = await getLineCodeList()
          //   return list.data.result
          // },
        },
        {
          prop: "lineName",
          label: $i18n.t("common.lineName"),
          minWidth: 200,
          showOverflowTooltip: true
        },
        {
          prop: "productProcessCode",
          label: $i18n.t("common.processCode"),
          minWidth: 200,
          showOverflowTooltip: true
          // optionProp: {
          //   value: "value",
          //   label: "description",
          // },
          // option: async (data) => {
          //   const list = await getProductProcessCodeList()
          //   return list.data.result
          // },
        },
        {
          prop: "productProcessName",
          label: $i18n.t("common.processName"),
          minWidth: 200,
          showOverflowTooltip: true
        },
        {
          prop: "workCellCode",
          label: $i18n.t("mesScanRecord.collectedWorkCellCode"),
          minWidth: 200,
          showOverflowTooltip: true
          // optionProp: {
          //   value: "value",
          //   label: "description",
          // },
          // option: async (data) => {
          //   const list = await getWorkCellCodeList()
          //   return list.data.result
          // },
        },
        {
          prop: "workCellName",
          label: $i18n.t("mesScanRecord.collectedWorkCellName"),
          minWidth: 200,
          showOverflowTooltip: true
        },
        {
          prop: "workTeamCode",
          label: $i18n.t("mesScanRecord.collectedTeamCode"),
          minWidth: 200,
          showOverflowTooltip: true
          // optionProp: {
          //   value: "value",
          //   label: "description",
          // },
          // option: async (data) => {
          //   const list = await getWorkTeamCodeList()
          //   return list.data.result
          // },
        },
        {
          prop: "workTeamName",
          label: $i18n.t("mesScanRecord.collectedTeamName"),
          minWidth: 200,
          showOverflowTooltip: true
        },
        // {
        //   prop: "workShiftCode",
        //   label: "采集班次编码",
        //   minWidth: 200,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "workShiftName",
        //   label: "采集班次名称",
        //   minWidth: 200,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "userCode",
        //   label: "扫描人员编码",
        //   width: 160,
        //   // optionProp: {
        //   //   value: "value",
        //   //   label: "description",
        //   // },
        //   // option: async (data) => {
        //   //   const list = await getUserCodeList()
        //   //   return list.data.result
        //   // },
        // },
        // {
        //   prop: "userCode",
        //   label: "扫描人员工号",
        //   minWidth: 130,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "userName",
        //   label: "扫描人员名称",
        //   minWidth: 130,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "scanTime",
        //   label: "扫描时间",
        //   minWidth: 180,
        //   showOverflowTooltip: true,
        // },
        {
          prop: "orderCode",
          label: $i18n.t("mesScanRecord.orderCode"),
          minWidth: 220,
          showOverflowTooltip: true
        },
        // {
        //   prop: "workOrderCode",
        //   label: "工单编码",
        //   minWidth: 140,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "workOrderNode",
        //   label: "工单名称(预留)",
        //   minWidth: 140,
        //   showOverflowTooltip: true,
        // },
        {
          prop: "prodCode",
          label: $i18n.t("mesScanRecord.prodCode"),
          minWidth: 200,
          showOverflowTooltip: true
        },
        {
          prop: "prodName",
          label: $i18n.t("mesScanRecord.prodName"),
          minWidth: 160,
          showOverflowTooltip: true
        },
        {
          prop: "seriesCode",
          label: $i18n.t("mesScanRecord.seriesCode"),
          minWidth: 150,
          showOverflowTooltip: true
        },
        {
          prop: "seriesName",
          label: $i18n.t("mesScanRecord.seriesName"),
          minWidth: 150,
          showOverflowTooltip: true
        },
        {
          prop: "simulatedType",
          label: $i18n.t("mesScanRecord.simulatedType"),
          minWidth: 190,
          showOverflowTooltip: true,
          optionProp: {
            value: "value",
            label: "description"
          },
          option: async (data) => {
            const list = await getSimulatedTypeList()
            return list.data.result
          }
        },
        {
          prop: "prodOrderType",
          label: $i18n.t("mesScanRecord.prodOrderType"),
          minWidth: 200,
          showOverflowTooltip: true,
          optionProp: {
            value: "value",
            label: "description"
          },
          option: async (data) => {
            const list = await getProdOrderTypeList()
            return list.data.result
          }
        },
        // {
        //   prop: "bomVersionNumber",
        //   label: "BOM配方版本号",
        //   minWidth: 140,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "recordType",
        //   label: "类型",
        //   showOverflowTooltip: true,
        //   optionProp: {
        //     value: "value",
        //     label: "description",
        //   },
        //   option: async () => {
        //     const list = await getProcessPropertyList();
        //     console.log(list);
        //     return list.data.result;
        //   },
        // },
        // {
        //   prop: "checkResult",
        //   label: "检验结果",
        //   minWidth: 120,
        //   showOverflowTooltip: true,
        //   optionProp: {
        //     value: "value",
        //     label: "description",
        //   },
        //   option: async (data) => {
        //     const list = await getCheckResultList();
        //     return list.data.result;
        //   },
        // },
        {
          prop: "overStationNum",
          label: $i18n.t("mesScanRecord.overStationNum"),
          minWidth: 140,
          showOverflowTooltip: true
        }
        // {
        //   prop: "factoryCode",
        //   label: "工厂编码",
        //   minWidth: 120,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "Remark",
        //   label: "备注",
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "createByName",
        //   label: "创建人名称",
        //   width: 140,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "createTime",
        //   label: "创建时间",
        //   width: 170,
        // },
        // {
        //   prop: "updateByName",
        //   label: "更新人名称",
        //   width: 140,
        //   showOverflowTooltip: true,
        // },
        // {
        //   prop: "updateTime",
        //   label: "更新时间",
        //   width: 170,
        // },
        // {
        //   prop: "operate",
        //   label: "操作",
        //   width: 160,
        //   render: (h, scope) => {
        //     return (
        //       <ele-row-operation
        //         scope={scope}
        //         rowConfig={rowConfig}
        //         onRowOperate={this.rowOperate}
        //       />
        //     )
        //   },
        // },
      ]
    }
  },
  computed: {},
  methods: {
    //表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        add: () => {
          this.disableFields(false)
          this.formDataDialog = {}
          this.visible = true
        },
        deleteBatch: () => {
          this.$confirm($i18n.t('common.deleteBatch',{name:$i18n.t('mesScanRecord.name')}), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t("common.ok"),
            cancelButtonText: $i18n.t("common.cancel"),
            type: "warning"
          }).then(() => {
            const ids = data.rows.map((val) => val.id).join(",")
            this.rowDel(ids)
          })
        }
      }
      fnc[data.handleName]()
    },
    //表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        edit: () => {
          this.disableFields(false)
          this.rowDetail(row.id)
          this.visible = true
        },
        detail: () => {
          this.disableFields(true)
          this.rowDetail(row.id)
          this.visible = true
        },
        delete: () => {
          this.$confirm($i18n.t('common.deleteSingle',{name:$i18n.t('mesScanRecord.name')}), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: "warning"
          }).then(() => {
            this.rowDel(row.id)
          })
        }
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true
      api(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    //弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态
      const params = this.formDataDialog.id
        ? { title: $i18n.t('common.editSuccess'), api: rowUpdate, data }
        : { title: $i18n.t('common.addSuccess'), api: rowCreate, data }
      this.doSubmit(params)
    },
    //删除
    rowDel(data) {
      this.loading = true
      rowDel(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || $i18n.t("common.deleteSuccess"))
          this.refresh()
        })
        .finally(() => {
          this.loading = false
        })
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag
      this.formDescDialog.isShowSubmitBtn = !flag
    },
    rowDetail(id) {
      rowDetail(id).then((res) => {
        this.formDataDialog = res.data.result
      })
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    }
  }
}
</script>
